<template>
  <div class="database-table-view">
    <div class="steps-container">
      <div
        style="padding-top: 5px;height: 60px;padding-bottom: 10px;margin: 20px 0;background-color: white;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);">
        <el-steps :active="active" align-center>
          <el-step title="请选择数据库"></el-step>
          <el-step title="请选择数据表"></el-step>
          <el-step title="请谨慎操作"></el-step>
        </el-steps>
      </div>
      <div class="steps-content">
        <!--数据库选择 -->
        <el-card class="box-card" v-if="active === 1">
          <div class="box-card-title">请选择需要操作的数据库</div>
          <div style=" margin-top: 20px">
            <p style="display: inline-block;text-align: left;">
              已经为您检索到以下数据库：共
              <span style="color: #d90929;font-weight: bold;font-size: 18px">{{ databaseList.length }}</span>
              个
            </p>
            <div style="float: right;display: flex;align-items: center;">
              <el-input v-model="database.schemaName" placeholder="请输入要搜索的数据库名称" clearable
                        style="width: 240px;margin-right: 10px;"></el-input>
              <el-button icon="el-icon-search" circle @click="selectDatabaseByName()"></el-button>
            </div>
          </div>
          <div class="contentBox">
            <el-row :gutter="20">
              <el-col :span="8" v-for="item in databaseList" :key="item.id">
                <div class="grid-content bg-purple" @click="selectDatabase(item)">
                  <p class="text-content">{{ item.schemaName }}</p>
                  <p class="hover-text">字符集名称:{{ item.characterName }}<br>排序规则名称:{{ item.characterName }}</p>
                </div>
              </el-col>
            </el-row>
          </div>
          <div style="text-align: right;">
            <el-button style="margin-top: 12px;" @click="next">下一步<i class="el-icon-arrow-right el-icon--right"/>
            </el-button>
          </div>
        </el-card>

        <!--数据表选择 -->
        <el-card class="box-card" v-if="active === 2">
          <div style="display: flex; align-items: center;">
            <i class="el-icon-back " style="font-size: 24px;display: inline-block;" @click="prev"></i>
            <div class="box-card-title" style="display: inline-block;flex: 1; text-align: center;">请选择需要操作的数据表，<span
              style="color: red">您当前选择的数据库是：{{ selectedDatabase }}</span></div>
          </div>

          <div style=" margin-top: 20px">
            <p style="display: inline-block;text-align: left;">
              已经为您检索到该数据库下面的数据表：共
              <span style="color: #d90929;font-weight: bold;font-size: 18px">{{ tableList.length }}</span>
              个
            </p>
            <div style="float: right;display: flex;align-items: center;">
              <el-input v-model="database.tableName" placeholder="请输入要搜索的数据表名称" clearable
                        style="width: 240px;margin-right: 10px;"></el-input>
              <el-button icon="el-icon-search" circle @click="selectTableByName()"></el-button>
            </div>
          </div>
          <div class="contentBox">
            <el-row :gutter="20">
              <el-col :span="8" v-for="item in tableList" :key="item.id">
                <div class="grid-content bg-purple" @click="selectTable(item)">
                  <p class="text-content">{{ item.tableName }}</p>
                  <span class="hover-text">表注释：{{ item.tableComment }}</span> <!-- 鼠标悬浮时显示的文字 -->
                </div>
              </el-col>
            </el-row>
          </div>
          <div style="text-align: right;">
            <el-button style="margin-top: 12px;" @click="prev"><i class="el-icon-arrow-left el-icon--left"/>上一步
            </el-button>
            <el-button style="margin-top: 12px;" @click="next">下一步<i class="el-icon-arrow-right el-icon--right"/>
            </el-button>
          </div>
        </el-card>
        <!--数据选择处理 -->
        <el-card class="box-card" v-if=" active === 3">
          <div style="display: flex; align-items: center;">
            <i class="el-icon-back " style="font-size: 24px;display: inline-block;" @click="prev"></i>
            <div class="box-card-title" style="display: inline-block;flex: 1; text-align: center;">选择的数据库是：<i
              style="color: red">{{ database.schemaName }}</i> ，数据表是：<i style="color: red">{{ database.tableName }}</i>
            </div>
            <el-button style="margin-left: 20px;" type="success" plain size="small" @click="selectTableSql">查看建表sql
            </el-button>
          </div>
          <div style=" padding-top: 20px">
            <el-table
              :data="columnList.filter(data => !searchColumn || data.columnName.toLowerCase().includes(searchColumn.toLowerCase()))"
              style="width: 100%">
              <el-table-column
                width="130"
                label="列名"
                :show-overflow-tooltip="true"
                prop="columnName">
              </el-table-column>
              <el-table-column
                label="数据类型"
                width="75"
                :show-overflow-tooltip="true"
                prop="dataType">
              </el-table-column>
              <el-table-column
                label="最大长度"
                width="75"
                :show-overflow-tooltip="true"
                prop="maxLength">
              </el-table-column>
              <el-table-column
                label="是否为空"
                width="75"
                :show-overflow-tooltip="true"
                prop="isNullable">
              </el-table-column>
              <el-table-column
                label="主键"
                width="50"
                :show-overflow-tooltip="true"
                prop="columnKey">
              </el-table-column>
              <el-table-column
                label="默认值"
                width="60"
                :show-overflow-tooltip="true"
                prop="columnDefault">
                <template #default="{ row }"> <!-- v-slot:default 也可以写作 #default -->
                  {{ row.columnDefault === null ? 'null' : row.columnDefault }}
                </template>
              </el-table-column>
              <el-table-column
                label="附加信息"
                width="75"
                :show-overflow-tooltip="true"
                prop="extra">
              </el-table-column>
              <el-table-column
                label="列注释"
                :show-overflow-tooltip="true"
                prop="columnComment">
              </el-table-column>
              <el-table-column
                label="是否索引"
                width="50"
                :show-overflow-tooltip="true"
                prop="isIndexed">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.isIndexed === 'Yes'" type="danger" size="small"> 是 </el-tag>
                  <el-tag v-if="scope.row.isIndexed === 'No'" type="info" size="small"> 否 </el-tag>
                </template>
              </el-table-column>
              <el-table-column
                align="right">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="searchColumn"
                    size="mini"
                    placeholder="输入列名搜索"/>
                </template>
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.isIndexed === 'Yes'"
                    size="mini"
                    type="danger"
                    round
                    @click="handleEdit(scope.$index, scope.row)">修改索引
                  </el-button>

                  <el-button
                    v-if="scope.row.isIndexed === 'No'"
                    size="mini"
                    type="warning"
                    round
                    @click="handleEdit(scope.$index, scope.row)">创建索引
                  </el-button>
<!--                  <el-button-->
<!--                    size="mini"-->
<!--                    type="danger"-->
<!--                    @click="handleDelete(scope.$index, scope.row)">Delete-->
<!--                  </el-button>-->
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="text-align: right;">
            <el-button style="margin-top: 12px;" @click="prev"><i class="el-icon-arrow-left el-icon--left"/>上一步
            </el-button>
          </div>
        </el-card>


<!--        sql展示窗口 -->
        <div>
          <el-dialog
            title="建表sql"
            :visible.sync="showCreateSqlWindow"
            width="60%">
<!--            <span>{{ createSql }} </span>-->
            <!-- 复制按钮 -->
            <el-link
              icon="el-icon-document-copy"
              @click="copyToClipboard(createSql)"
              style="float: right; margin-bottom: 10px;">
              复制 SQL
            </el-link>
            <pre><code class="hljs" v-html="highlightedCode(createSql)"></code></pre>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="showCreateSqlWindow = false">确 定</el-button>
           </span>
          </el-dialog>
        </div>
      </div>
    </div>
    <div>
    </div>
  </div>

</template>

<script>
  import {
    getDatabaseList,
    getTableList,
    getDatabaseTableColumnList,
    getDatabaseTableSql
  } from '@/api/database/databaseTable'
  import hljs from "highlight.js/lib/highlight";
  import "highlight.js/styles/github-gist.css";
  hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));

  export default {
    name: "databaseTableView",
    data() {
      return {
        active: 1, // 当前步骤
        databaseList: [], // 数据库列表
        tableList: [], // 数据表列表
        columnList: [], // 数据表列信息
        database: {
          schemaName: '', // 数据库名
          tableName: '', // 数据表名
        },
        databaseName: '', // 要搜索的数据库名
        selectedDatabase: '', // 选择的数据库
        selectedTable: '', // 选择的表
        searchColumn: '', // 搜索列
        showCreateSqlWindow: false, // 是否显示建表sql
        createSql: '' // 建表sql
      };
    },

    created() {
      // 获取数据库列表
      this.getTableList()

      // // 根据前两步选择的数据库和数据表，查询数据表的列信息
      // getDatabaseTableColumnList(this.database).then(response => {
      //   this.columnList = response.data
      // })
    },

    methods: {
      copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(() => {
          this.$message.success('复制成功！');
        }).catch(err => {
          this.$message.error('复制失败！');
          console.error('复制失败', err);
        });
      },
      // 获取数据库列表
      getTableList() {
        getDatabaseList().then(response => {
          this.databaseList = response.data
        })
      },
      // 点击搜索按钮,根据数据库名搜索数据库
      selectDatabaseByName() {
        getDatabaseList(this.database).then(response => {
          this.databaseList = response.data
          this.$message.success('搜索成功')
        })
      },
      // 选择数据库
      selectDatabase(item) {
        this.selectedDatabase = item.schemaName
        this.database.schemaName = item.schemaName
        this.$message.success('选择成功，您选择是数据库是 ' + this.selectedDatabase)
        // 选择数据库之后可以直接进入下一步
        this.next()

        // 然后根据数据库名称查询数据表列表
        getTableList(this.database).then(response => {
          this.tableList = response.data
        })
      },

      // 选择数据表
      selectTable(item) {
        this.selectedTable = item.tableName
        this.database.tableName = item.tableName
        this.$message.success('选择成功，您选择的数据表是 ' + this.selectedTable)
        // 选择数据表之后可以直接进入下一步
        this.next()

        // 根据前两步选择的数据库和数据表，查询数据表的列信息
        getDatabaseTableColumnList(this.database).then(response => {
          this.columnList = response.data
        })
      },
      // 点击搜索按钮,根据数据表名搜索数据表
      selectTableByName() {
        getTableList(this.database).then(response => {
          this.tableList = response.data
          this.$message.success('搜索成功')
        })
      },
      // 点击上一步
      prev() {
        if (this.active === 2) this.database.schemaName = ''
        if (this.active === 3) this.database.tableName = ''
        this.active--
        window.scrollTo(0, 0); // 滚动到顶部

      },
      // 点击下一步
      next() {
        if (this.active === 1 && this.database.schemaName === '') {
          this.$message.error('请选择数据库')
          window.scrollTo({top: 0, behavior: 'smooth'}); // 缓慢滚动到顶部
          return
        }
        if (this.active === 2 && this.database.tableName === '') {
          this.$message.error('请选择数据表')
          window.scrollTo({top: 0, behavior: 'smooth'}); // 缓慢滚动到顶部
          return
        }
        this.active++
        window.scrollTo(0, 0);// 滚动到顶部
      },
      // 编辑数据
      handleEdit(index, row) {
        console.log(index, row);
      },
      // 删除数据
      handleDelete(index, row) {
        console.log(index, row);
      },

      // 查看该表的建表sql
      selectTableSql() {
        getDatabaseTableSql(this.database).then(response => {
          this.createSql = response.data
        })
        this.showCreateSqlWindow = true;
      },
      /** 高亮显示 */
      highlightedCode(text) {
        const result = hljs.highlight('sql', text || "", true);
        return result.value || '&nbsp;';
      },
    }
  }
</script>

<style scoped>
  .steps-container {
    margin: 20px 20px;
    background-color: white;
    /*height: 60px;*/
    border-radius: 5px;
  }

  .steps-content {
    margin-top: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

  }

  .box-card-title {
    text-align: center;
    color: #1ab394;
    font-size: 20px;
  }

  .contentBox {
    margin-top: 20px;
    text-align: center;
  }

  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    /*background: #1060ce;*/
  }

  .bg-purple {
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

  }

  .bg-purple-light {
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }

  .grid-content {
    border-radius: 4px;
    min-height: 100px;
    margin-top: 20px;
    background-image: url('./../../../assets/image/login-background.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.8;
    display: flex; /* 使用 flex 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100%; /* 确保容器高度占满 */
    padding-bottom: 20px;
  }

  .grid-content:hover {
    background-color: #e5dfdf;
    transform: scale(1.05); /* 放大到原来的1.2倍 */
    cursor: pointer;
  }

  .row-bg {
    padding: 10px 0;
    background-color: white;

  }

  .text-content {
    color: #e2c508;
    font-size: 30px;
    white-space: nowrap; /* 防止文字换行 */
    overflow: hidden; /* 隐藏溢出的内容 */
    text-overflow: ellipsis; /* 显示省略号 */
  }

  .hover-text {
    display: none; /* 默认隐藏 */
    position: absolute; /* 绝对定位 */
    bottom: 10px; /* 设置悬浮文字的位置 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 精确居中 */
    background-color: rgba(255, 255, 255, 0.8); /* 背景颜色 */
    padding: 5px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  }

  .grid-content:hover .hover-text {
    display: block; /* 悬浮时显示文字 */
    color: red;
  }

  i:hover {
    cursor: pointer;
  }
</style>
